<!--
 * @Author: bao
 * @Description: 消费记录列表
 * @Date: 2020-02-02 14:53:02
 -->
<template>
  <div style="padding: 10px 20px; background-color: #fff;">
    <p class="title">
      <a-breadcrumb style="margin: 16px 0;color: #666666FF;font-size: 14px;">
        <a-breadcrumb-item
          ><a @click="$router.go(-1)">消费记录</a></a-breadcrumb-item
        >
        <a-breadcrumb-item>消费详情</a-breadcrumb-item>
      </a-breadcrumb>
    </p>
    <div class="btnBox">
      <div class="box">
        <div class="single-search-item">
          <div class="item-label">表名：</div>
          <div class="item-content">
            {{ info.tableEname }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">表名中文名：</div>
          <div class="item-content">
            {{ info.tableCname }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">数据来源单位：</div>
          <div class="item-content">
            {{ info.sourceDepartment }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">资源编号：</div>
          <div class="item-content">
            {{ info.sourceId }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">数据来源系统：</div>
          <div class="item-content">
            {{ info.sourceSystem }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">是否消费：</div>
          <div class="item-content">
            {{ info.isConsume }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">共享范围：</div>
          <div class="item-content">
            {{ info.sharingRange }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">共享方式：</div>
          <div class="item-content">
            {{ info.sharingMode }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">包含要素：</div>
          <div class="item-content">
            {{ info.containsElements }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">资源摘要：</div>
          <div class="item-content">
            {{ info.remarks }}
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">更新周期：</div>
          <div class="item-content">
            {{ info.updateType }}
          </div>
        </div>
      </div>
    </div>
    <a-table
      style="overflow-x: scroll;"
      :columns="listObject.columns"
      :dataSource="listObject.list"
      :loading="listObject.loading"
      :pagination="pagination"
      rowKey="id"
      @change="handleTableChange"
    >
      <span slot="order" slot-scope="text, record, index">
        <em>{{ index + 1 }}</em>
      </span>
      <span slot="productionMethod" slot-scope="text">
        <span v-if="text === 1">诈骗人员短信中截取</span>
        <span v-if="text === 2">访问url中收集</span>
        <span v-if="text === 3">录入</span>
      </span>
      <span slot="createTime" slot-scope="text">
        {{ text | dateTimeFormat }}
      </span>
    </a-table>
  </div>
</template>

<script>
import { page } from "@/api";
import { setDetailId, getDetailId } from "@/libs/util";
export default {
  data() {
    return {
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "入库时间",
            dataIndex: "insertTime",
            scopedSlots: { customRender: "insertTime" },
            align: "center"
          },
          {
            title: "入库表名",
            dataIndex: "tableEname",
            scopedSlots: { customRender: "tableEname" },
            align: "center"
          },
          {
            title: "入库表中文名",
            dataIndex: "tableCname",
            scopedSlots: { customRender: "tableCname" },
            align: "center"
          },
          {
            title: "消费数据量",
            dataIndex: "dataConsumerNum",
            scopedSlots: { customRender: "dataConsumerNum" },
            align: "center"
          },
          {
            title: "实际入库量",
            dataIndex: "dataNum",
            scopedSlots: { customRender: "dataNum" },
            align: "center"
          },
          {
            title: "入库内容大小",
            dataIndex: "dataSize",
            scopedSlots: { customRender: "dataSize" },
            align: "center"
          },
          {
            title: "入库成功率",
            dataIndex: "successRate",
            scopedSlots: { customRender: "successRate" },
            align: "center"
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 10
      },
      // id: this.$route.params.id,
      sourceId: this.$route.query.sourceId,
      info: { tableEname: "", tableCname: "" }
    };
  },
  created() {
    // if (this.id !== undefined) {
    //   setDetailId(this.id);
    // } else {
    //   this.id = getDetailId();
    // }
    this.getList();
    this.getDetail();
  },
  computed: {},
  mounted() {},
  methods: {
    startRefresh() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.getPars.currentPage = pagination.current;
      this.getList();
    },
    getList() {
      this.listObject.loading = true;
      let params = Object.assign(this.getPars, { sourceId: this.sourceId });
      page.getDataEntryList(params).then(res => {
        let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data.records;
        this.listObject.loading = false;
        this.setPagination(current, size, total);
      });
    },
    getDetail() {
      page.tableDetail({ sourceId: this.sourceId }).then(res => {
        // page.getDetailById({ id: this.id }).then(res => {
        this.info.tableEname = res.data.data.tableEname;
        this.info.tableCname = res.data.data.tableCname;
        this.info.sourceDepartment = res.data.data.sourceDepartment;
        this.info.sourceId = res.data.data.sourceId;
        this.info.sourceSystem = res.data.data.sourceSystem;
        if (res.data.data.isConsume === 1) {
          this.info.isConsume = "是";
        } else {
          this.info.isConsume = "否";
        }
        this.info.sharingRange = res.data.data.sharingRange;
        this.info.sharingMode = res.data.data.sharingMode;
        this.info.containsElements = res.data.data.containsElements;
        this.info.remarks = res.data.data.remarks;
        this.info.updateType = res.data.data.updateType;
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`
      };
    }
  }
};
</script>

<style scoped lang="less">
.title {
  font-size: 24px;
  color: #333333ff;
  padding-bottom: 10px;
  border-bottom: 2px solid #ccccccff;
}
.btnBox {
  position: relative;
  height: 170px;
  overflow: hidden;
  margin-top: 30px;
  .btn {
    margin-left: 12px;
    margin-top: 10px;
  }
  .box {
    position: absolute;
    right: 0;
    top: 0;
    .single-search-item {
      // display: inline-block;
      float: left;
      width: 317px;
      padding: 10px;
    }
    .item-label {
      display: inline-block;
      width: 98px;
      text-align: right;
    }
    .item-content {
      display: inline-block;
      width: 198px;
    }
  }
}
</style>
